<template>
      <div class="container">
        <header class="header">
            <ul>
                <li><a href="javascript:window.history.back();"><span class="icon">&#xe738;</span></a></li>
                <li>
                    <h1>资讯</h1>
                </li>
                <li><a href="#"><span class="icon">&#xe624;</span></a></li>
            </ul>
        </header>
        <nav class="nav">
            <ul>
                <li v-for="(v,index) in menus" :key="index "  :class="index == menuActive?'active':'' "><a href="#" @click="menuTap(index)">
                    {{v}}</a></li>
                <!-- <li><a href="#">行情</a></li>
                <li><a href="#">科普</a></li> -->
            </ul>
        </nav>
        <section class="info">
            <ul>
                <li  v-for="v in inFoList" :key="v.nid">
                    <h1>{{v.title}}</h1>
                     <div class="info-img" v-if="v.imgList.length !=0">
                        <img v-for="(val,index) in v.imgList" :key="index" :src="val" alt="">
                    </div>
                    <p>{{v.source+""+v.pubtime}}<span class="icon text-r">
                        <a href="#">&#xe607;</a>
                        <a href="#">&#xe61b;</a>
                        <a href="#">&#xe639;</a></span></p>
                </li>
               <!--  <li>
                    <h1>北京拟规定 :出租人不得在租赁期限内单方面提高租金</h1>
                    <div class="info-img">
                        <img src="images/info1.png" alt="">
                        <img src="images/info2.png" alt="">
                        <img src="images/info3.png" alt="">
                    </div>
                    <p>大谈房屋知识 2019.08.08<span class="icon text-r"><a href="#">&#xe607;</a><a href="#">&#xe61b;</a><a
                                href="#">&#xe639;</a></span></p>
                </li>
                <li>
                    <h1>一二线城市长租公寓规模将超3000亿 租金收益率仅2%</h1>
                    <p>大谈房屋知识 2019.08.08<span class="icon text-r"><a href="#">&#xe607;</a><a href="#">&#xe61b;</a><a
                                href="#">&#xe639;</a></span></p>
                </li>
                <li>
                    <div class="info-l">
                        <h1>90后毕业生租房:舒适度比租金重要</h1>
                        <p>大谈房屋知识 2019.08.08<span class="icon text-r"><a href="#">&#xe607;</a><a href="#">&#xe61b;</a><a href="#">&#xe639;</a></span></p>
                    </div>
                    <img class="img-r" src="images/info4.png">
                </li>
                <li>
                    <h1>贷款租房 叫好还要叫座</h1>
                    <p>大谈房屋知识 2019.08.08<span class="icon text-r"><a href="#">&#xe607;</a><a href="#">&#xe61b;</a><a
                                href="#">&#xe639;</a></span></p>
                </li> -->
            </ul>
        </section>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: '',
    data () {
      return {
          menus:['雷区','行情','科普'],
          menuActive:0,
      }
    },
    components: {

    },
    mounted:function() {
        //页面挂载时，执行中间件请求数据
        this.$store.dispatch('getallList',this.menus[this.menuActive]);
    },
    created () {
        
    },
    updated () {
        
    },
    destroyed () {
        
    },
    methods: {
        menuTap(i){
            this.menuActive =i;
            this.$store.dispatch('getallList',this.menus[i]);
        }
    },
    computed: {
       //获取属性
        inFoList(){
            console.log(this.$store.state.infomore.allList);
            return this.$store.state.infomore.allList
        }
    },
    watch: {

    },
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
.header {
    padding: .3rem .3rem 0;
    height: .5rem;
    position: fixed;
    height: 1.10rem;
    top: 0;
    background-color: #fff;
    box-sizing: border-box;
}

.header ul {
    display: flex;
    justify-content: space-between;
}

.header ul li {
    width: 2.25rem;
    height: .5rem;
}

.header ul li h1 {
    font-size: .48rem;
    text-align: center;
}

.header ul li span {
    font-size: .4rem;
    line-height: .6rem;
    display: block;
}

.header ul li:last-child span {
    text-align: right;
}

.nav {
    padding-top:1.3rem;
    margin: 0 .3rem;
}

.nav ul {
    width: 100%;
    height: .5rem;
}

.nav ul::after {
    content: "";
    display: block;
    clear: both;
}

.nav ul li {
    font-size: .34rem;
    color: #8b8b8b;
    line-height: .48rem;
    float: left;
    width: 1.5rem;
}

.nav ul li a {
    color: inherit;
}

.nav ul li.active {
    font-size: .48rem;
    color: #202020;
}

.info {
    margin: .5rem .3rem 0;
}

.info ul li {
    border-bottom: 1px solid #fafafa;
}

.info ul li h1 {
    font-size: .4rem;
    line-height: .65rem;
    letter-spacing: -.04rem;
}

.info ul li p {
    font-size: .24rem;
    color: #b7b7b7;
    margin-top: .2rem;
    margin-bottom: .25rem;
}

.info ul li p .text-r {
    float: right;
}

.info ul li p .text-r a {
    display: inline-block;
    margin: 0 .1rem;
    color: inherit;
}

.info ul li .info-img {
    display: flex;
    justify-content: space-between;
}

.info ul li img {
    width: 2.19rem;
    height: 1.82rem;
    display: block;
}

.info ul li .img-r {
    float: right;
}

.info ul li .info-l {
    width: 4.32rem;
    float: left;
}

.info ul li:nth-child(4)::after {
    content: "";
    clear: both;
    display: block;
}

@media screen and (max-width:350px) {
    .info ul li p .text-r a {
        display: inline-block;
        margin: 0 .05rem;
        color: inherit;
    }
}
 
</style>
